<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "财税合规"
      },
      // 暂时需要登录，后续再改
      "needLogin": true
    }
</route>

<script lang="ts" setup>
import { ref } from 'vue'
import cj_ser_four from '../static-assets/circle/cj_ser_four.png'
import cj_ser_one from '../static-assets/circle/cj_ser_one.png'
import cj_ser_three from '../static-assets/circle/cj_ser_three.png'
import cj_ser_two from '../static-assets/circle/cj_ser_two.png'
import gerenshui from '../static-assets/circle/gerenshui.png'
import huo from '../static-assets/circle/huo.png'
import other from '../static-assets/circle/other.png'
import qiye_two from '../static-assets/circle/qiye_two.png'
import qiyeshui from '../static-assets/circle/qiyeshui.png'
import zengzhi from '../static-assets/circle/zengzhi.png'
import zengzhi_two from '../static-assets/circle/zengzhi_two.png'

interface riskItem {
  id: number
  title: string
  description: string
  circleImg: string
  iconleft: string
  iconright?: string
}
// 专家数据
const experts = ref([
  {
    id: 1,
    name: '吴XX',
    title: '高级税务经理',
    avatar: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/avatar.png',
    description: '10年财税经验，专注企业税务筹划',
  },
  {
    id: 2,
    name: '吴XX',
    title: '高级税务经理',
    avatar: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/avatar.png',
    description: '擅长企业所得税、增值税优化',
  },
  {
    id: 3,
    name: '吴XX',
    title: '高级税务经理',
    avatar: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/avatar.png',
    description: '专注跨境税务、转让定价',
  },
])

// 服务项目
const services = ref<riskItem[]>([
  {
    id: 1,
    title: '增值税',
    description: '留抵退税 / 进项加计抵减 / 发票抵扣',
    circleImg: cj_ser_one,
    iconleft: zengzhi,
    iconright: huo,
  },
  {
    id: 2,
    title: '企业所得税',
    description: '资质申请 / 政府补贴',
    circleImg: cj_ser_two,
    iconleft: qiyeshui,
  },
  {
    id: 3,
    title: '个人所得税',
    description: '私人税筹 / 年终奖筹划',
    circleImg: cj_ser_three,
    iconleft: gerenshui,
  },
  {
    id: 4,
    title: '其它税种',
    description: '消费税 / 进出口税 / 土地增值税 / 印花税',
    circleImg: cj_ser_four,
    iconleft: other,
  },
])

const accountingPractices = ref<riskItem[]>([
  {
    id: 1,
    title: '票账应用',
    description: '发票实物 / 财务处理',
    circleImg: cj_ser_one,
    iconleft: qiye_two,
    iconright: huo,
  },
  {
    id: 2,
    title: '汇算清缴',
    description: '纳税调整 / 补退税分析',
    circleImg: cj_ser_two,
    iconleft: zengzhi_two,
  },
])
// 咨询方法
function handleConsult() {
  uni.showToast({
    title: '正在连接客服...',
    icon: 'none',
  })
  // 这里可以添加跳转到咨询页面或拨打电话等功能
}
</script>

<template>
  <view class="bg-#f5f5f5 pb-30rpx">
    <!-- 顶部banner -->
    <view class="h-350rpx overflow-hidden p-20rpx">
      <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="widthFix" :lazy-load="true" />
    </view>

    <!-- 专家团队 -->
    <view class="m-20rpx rounded-12rpx bg-white p-30rpx">
      <view class="relative mb-20rpx pl-20rpx text-34rpx font-500">
        资深税务师为您答疑解惑
      </view>
      <view class="flex justify-between gap-20rpx">
        <view
          v-for="expert in experts"
          :key="expert.id"
          class="w-30% flex flex-col items-center overflow-hidden rounded-12rpx bg-[#FFF5EA] p-20rpx"
        >
          <image :src="expert.avatar" class="mb-10rpx h-120rpx w-120rpx rounded-60rpx" mode="aspectFill" />
          <view class="my-10rpx text-28rpx font-bold">
            {{ expert.name }}
          </view>
          <view class="mb-10rpx rounded-12rpx p-8rpx text-24rpx text-#fff" style="background: linear-gradient(90deg, #FF6D45 0%, #FF985A 100%);">
            {{ expert.title }}
          </view>
        </view>
      </view>
      <view class="mt-20rpx">
        <wd-button type="primary" size="large" custom-class="red_button" block @click="handleConsult">
          立即咨询
        </wd-button>
      </view>
    </view>

    <!-- 税总分类 -->
    <view class="m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view class="relative z-10">
        <view class="flex">
          <view class="text-28rpx text-black font-500">
            税总分类
          </view>
          <view class="ml-10rpx flex items-center text-24rpx text-#333">
            <view class="mr-10rpx h-24rpx w-6rpx rounded-12rpx bg-red-500"></view>
            <view> 选择税种精准匹配专家</view>
          </view>
        </view>
        <view class="mt-20rpx">
          <view class="grid grid-cols-2 gap-15rpx">
            <view
              v-for="service in services"
              :key="service.id"
              class="relative h-142rpx overflow-hidden rounded-12rpx bg-#f9f9f9 p-20rpx"
            >
              <image
                :src="service.circleImg"
                mode="scaleToFill"
                class="absolute inset-0 h-full w-full" :lazy-load="true"
              />
              <view class="relative z-10 mt-10rpx">
                <view class="mb-10rpx flex items-center font-500">
                  <image
                    :src="service.iconleft"
                    mode="scaleToFill"
                    class="h-34rpx w-34rpx"
                  />
                  <view class="px-10rpx text-[28rpx]">{{ service.title }}</view>
                  <image
                    v-if="service.iconright"
                    :src="service.iconright"
                    mode="scaleToFill"
                    class="h-36rpx w-36rpx"
                  />
                </view>
                <view class="line-clamp-2 text-24rpx text-#666">
                  {{ service.description }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 会计实务 -->
    <view class="relative m-20rpx overflow-hidden rounded-12rpx bg-white p-20rpx">
      <view class="relative z-10">
        <view class="flex items-center">
          <view class="text-28rpx text-black font-bold">
            会计实务
          </view>
          <view class="ml-10rpx flex items-center text-24rpx text-#333">
            <view class="mr-10rpx h-24rpx w-6rpx rounded-12rpx bg-red-500"></view>
            <view>选择税种精准匹配专家</view>
          </view>
        </view>
        <view class="grid grid-cols-2 mt-20rpx gap-15rpx">
          <view
            v-for="service in accountingPractices"
            :key="service.id"
            class="relative h-142rpx overflow-hidden rounded-12rpx bg-#f9f9f9 p-20rpx"
          >
            <image
              :src="service.circleImg"
              mode="scaleToFill"
              class="absolute inset-0 h-full w-full" :lazy-load="true"
            />
            <view class="relative z-10 mt-10rpx">
              <view class="mb-10rpx flex items-center font-500">
                <image
                  :src="service.iconleft"
                  mode="scaleToFill"
                  class="h-34rpx w-34rpx"
                />
                <view class="px-10rpx text-[28rpx]">{{ service.title }}</view>
                <image
                  v-if="service.iconright"
                  :src="service.iconright"
                  mode="scaleToFill"
                  class="h-36rpx w-36rpx"
                />
              </view>
              <view class="line-clamp-2 text-24rpx text-#666">
                {{ service.description }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="m-20rpx rounded-12rpx bg-white p-20rpx">
      <view class="mb-30rpx flex items-center pl-10rpx text-32rpx font-bold">
        合作机构
      </view>
      <scroll-view scroll-x class="whitespace-nowrap px-4" style="width: auto;">
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
        <image src="https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/heard_img.png" mode="aspectFill" class="mr-4 h-40 w-60 rounded-md" :lazy-load="true" />
      </scroll-view>
    </view>
  </view>
</template>

<style>
/* 仅保留必要的样式，其他都通过UnoCSS实现 */
.iconfont {
  display: inline-block;
}
</style>
